<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">

<head th:replace="common/menu::head"></head>

<body>
    <span th:replace="common/menu::menu"></span>

    <div th:unless="${#lists.isEmpty(buildList)}">
        <table>
            <thead>
                <tr>
                    <th width="20px">id</th>
                    <th width="10px">name</th>
                    <th width="10px">metal</th>
                    <th width="10px">crystal</th>
                    <th width="10px">deuterium</th>
                    <th width="10px">solar</th>
                </tr>
            </thead>
            <tbody>
                <tr th:each="build : ${buildList}">
                    <td th:text="${build.planetId}" bgcolor="#EEEEEE"></td>
                    <td th:text="${build.name}"></td>
                    <td th:text="${build.metal}"></td>
                    <td th:text="${build.crystal}"></td>
                    <td th:text="${build.deuterium}"></td>
                    <td th:text="${build.solarPlant}"></td>
                </tr>
            </tbody>
        </table>
    </div>

    <div>
        <p class="divtitle">[ level up ]</p>
        <form>
            <select id="planetId">
                <option th:each="build : ${buildList}" th:value="${build.planetId}" th:text="${build.name}">星球
                </option>
            </select>
            <select id="buildId">
                <option value="1">金属矿</option>
                <option value="2">晶体矿</option>
                <option value="4">太能站</option>
                <option value="14">纳米厂</option>
            </select>
            <input type="button" value="submit" onclick="levelUp()">
            <input type="text" id="upResult" placeholder="result" readonly class="result"/>
        </form>
    </div>

    <script>
        var xmlHttp = new XMLHttpRequest();
        function levelUp() {
            var pId = document.getElementById('planetId').value;
            var bId = document.getElementById('buildId').value;
            xmlHttp.open('post', '/build/levelUp', true);
            xmlHttp.setRequestHeader("content-type", "application/x-www-form-urlencoded");
            xmlHttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("upResult").value = this.responseText;
                }
            };
            xmlHttp.send('planetId='+pId+'&'+'buildId='+bId);
        }
    </script>

</body>

</html>